<template>
  <view v-if="webviewUrl" style="width:100%;height:100%;overflow: hidden;box-sizing: border-box;">
    <web-view id="mywebframe" :webview-styles="webviewStyles" :src="`${webviewUrl}`" style="width:100%;height:100%;overflow: hidden;box-sizing: border-box;"></web-view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        params: {},
        webviewStyles: {
          progress: {
            color: "#FF3333"
          }
        },
		webviewUrl: "",
      }
    },
    props: {
      src: {
        type: [String],
        default: null
      }
    },
    onLoad(option) {
      this.params = option
	  let data = JSON.parse(this.params.data)
	  if(data.title=='项目检测报告'){
		   this.webviewUrl = this.params.url + '?detectionReportId=' + data.detectionReportId+'&authorization='+data.authorization+'&reportdevice='+data.reportdevice
	  }else{
		  this.webviewUrl = this.params.url + '?fileName=' + data.fileName+'&authorization='+this.$store.state.user.token+'&device='+data.device+'&ordersId='+data.ordersId+'&uuid='+data.uuid
	  }
	  // console.log('this.webviewUrl--->', this.webviewUrl)
	  // console.log(data)
	
      if (data.title) {
        uni.setNavigationBarTitle({
          title: data.title
        })
      }
	  // 监听webview发送的消息
	  window.addEventListener('message', this.receiveMessage);
    },
	onUnload() {
		// 移除监听器
		window.removeEventListener('message', this.receiveMessage);
	},
	methods: {
		isScreenOrientationLockSupported() {
			return 'lockOrientation' in screen && 'orientation' in screen && typeof screen.orientation.lock ===
				'function';
		},
		tryLockOrientation() {
			if (!this.isScreenOrientationLockSupported()) {
				this.$modal.msg(`该浏览器不支持横屏锁定切换！`)
				return false;
			}
			try {
				screen.orientation.lock('landscape').then(
					() => console.log('Orientation locked successfully.'),
					(error) => this.$modal.msg(`横屏锁定切换失败！`)
				);
				return true;
			} catch (error) {
				this.$modal.msg(`横屏锁定切换失败！`)
				return false;
			}
		},
		receiveMessage(event) {
			let data = event.data.message
			console.log(data)
			if(data){
			  	
			
			let docElm = document.documentElement;
			if (!document.fullscreenElement &&!document.msFullscreenElement &&!document.mozFullScreenElement &&!document.webkitFullscreenElement) {
				if (docElm.requestFullscreen) {
					docElm.requestFullscreen();
				} else if (docElm.msRequestFullscreen) {
					// IE
					docElm = document.body; // overwrite the element (for IE)
					docElm.msRequestFullscreen();
				} else if (docElm.mozRequestFullScreen) {
					// 火狐
					docElm.mozRequestFullScreen();
				} else if (docElm.webkitRequestFullScreen) {
					// 谷歌
					docElm.webkitRequestFullScreen();
				}
			} else {
				if (document.exitFullscreen) {
					document.exitFullscreen();
				} else if (document.msExitFullscreen) {
					document.msExitFullscreen();
				} else if (document.mozCancelFullScreen) {
					document.mozCancelFullScreen();
				} else if (document.webkitCancelFullScreen) {
					document.webkitCancelFullScreen();
				}
			}
			if (screen.orientation) {
			      
			        if (this.tryLockOrientation()) {
			         
			          if (screen.orientation.type == 'portrait-primary') {
			          
			           screen.orientation.lock("landscape-primary").catch(e => console.error(e));
			           
			          } else {
			           screen.orientation.lock('portrait-primary').catch(e => console.error(e));
			            
			          }
			        } else {
			          this.$modal.msg(`该浏览器不支持横屏锁定切换！`)
			        }
	
			      } else {
			        // this.landscapeStatus=!this.landscapeStatus
			        this.$modal.msg(`不支持横屏切换！`)
			      }
				  
				  }
		}
	}
  }
</script>
<style lang="scss" scoped>
	
	::v-deep body, ::v-deep html {
	            width: 100%;
	            height: 100%;
	            margin: 0;
	            padding: 0;
	        }
</style>
